<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb-base" style="line-height: 30px">
      <el-breadcrumb-item>
        <i class="el-icon-edit-outline"></i>
        切片评定
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="main-container">
      <div>
        <el-form :model="filterForm" label-width="70px">
          <el-row>
            <el-col :span="4">
              <el-form-item label="病理编号">
                <el-input v-model="filterForm.pathologyId" placeholder="请输入病理编号" class="input-form" size="mini">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="评定状态">
                <el-select placeholder="请选择评定状态" v-model="filterForm.sliceQualityStatus" clearable class="picker-form"
                  size="mini">
                  <el-option v-for="item in assessmentStatusMenus" :key="item.value" :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="切片用途">
                <el-select v-model="filterForm.slicePurpose" placeholder="请选择切片用途" clearable class="picker-form"
                  size="mini">
                  <el-option v-for="item in sliceUsesList" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item class="el-form-item" label="所属医院">
                <el-select v-model="filterForm.sliceHospital" class="picker-form" size="mini" @change="getBranchList">
                  <el-option v-for="t in hospitalList" :key="t.id" :label="t.name" :value="t.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item class="el-form-item" label="分院名称">
                <el-select v-model="filterForm.branchName" placeholder="请选择分院" clearable class="picker-form" size="mini">
                  <el-option v-for="item in branchCourtsList" :key="item.name" :label="item.name"
                    :value="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="expansion" @click="showExpansion = !showExpansion">
                <font-awesome-icon v-if="!showExpansion" :icon="['fas', 'angle-down']">
                </font-awesome-icon>
                <font-awesome-icon v-else :icon="['fas', 'angle-up']">
                </font-awesome-icon>
              </div>
            </el-col>
            <el-col :span="2" class="col-button-top">
              <el-button type="primary" size="mini" @click="getPages">搜索
              </el-button>
            </el-col>
            <el-col :span="2" class="col-button-top">
              <el-button type="primary" size="mini" @click="printList">打印列表
              </el-button>
            </el-col>
            <el-col v-show="filterForm.sliceQualityStatus === 2" :span="2" class="col-button-top">
              <el-button type="primary" size="mini" @click="rescanSuccess">重扫完成
              </el-button>
            </el-col>
          </el-row>
          <el-row v-if="showExpansion">
            <el-col :span="5">
              <el-form-item label="评定人">
                <el-select placeholder="请选择评定人" clearable v-model="filterForm.updateUserId" class="picker-form"
                  size="mini">
                  <el-option v-for="item in scanNameList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="扫描仪">
                <el-select placeholder="请选择扫描仪" clearable v-model="filterForm.scannerBrandModel" class="picker-form"
                  size="mini">
                  <el-option v-for="item in scannerBrandModelList" :key="item.value" :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="扫描时间">
                <el-date-picker class="time-picker-form" size="mini" type="datetimerange" align="right"
                  v-model="filterForm.scanTimes" unlink-panels range-separator="-" start-placeholder="开始日期"
                  end-placeholder="结束日期" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="评定时间">
                <el-date-picker class="time-picker-form" size="mini" type="datetimerange" align="right"
                  v-model="filterForm.assessTimes" unlink-panels range-separator="-" start-placeholder="开始日期"
                  end-placeholder="结束日期" />
              </el-form-item>
            </el-col>

            <!--<el-button size="mini" @click="getAgainScanPage">重扫列表</el-button>-->
          </el-row>
        </el-form>
      </div>
      <el-row class="col-button-top" style="text-align: center">
        <span class="assess-font-color">共有{{
          this.assessmentTable.sliceQualityEvaluateProgressInfo.total
        }}张切片,其中已评定{{
  this.assessmentTable.sliceQualityEvaluateProgressInfo.finishedCount
}}张,未评定{{
  this.assessmentTable.sliceQualityEvaluateProgressInfo
    .unFinishedCount
}}张(包含非院内诊断切片),需重扫{{
  this.assessmentTable.sliceQualityEvaluateProgressInfo
    .finishedHeavyBrush
}}张,重扫完成{{
  this.assessmentTable.sliceQualityEvaluateProgressInfo
    .finishedHeavyBrushFinish
}}张,
        </span>
      </el-row>
      <el-row class="col-button-top">
        <base-table :selected="isSelected" :header="assessmentTable.header" :operation="assessmentTable.operation"
          :data="assessmentTable.data" :pageInfo="assessmentTable.pageInfo" @handleClick="diagnosisTableButtonClick"
          @pageJumpTo="diagnosisTablePageJumpTo" @sizeChange="diagnosisTableSizeChange" @selectionChange="selectionChange"
          @handleSelectAll="handleSelectAll" tooltip-effect="“dark”">
        </base-table>
      </el-row>
    </div>
  </div>
</template>

<script>
import BaseTable from '@templates/components/BaseTable';
import moment from 'moment/moment';
import { itemsPerPage } from '@/client/libs/util';

export default {
  name: 'sliceAssess',
  components: {
    BaseTable,
  },
  data() {
    return {
      imageServiceURL: process.env.ImageServiceURL,
      isSelected: true, //是否支持多选
      selectedList: [], //批量修改保存diagnosisIds
      scanNameList: [], // 评定员列表
      scannerBrandModelList: [], // 扫面仪字典
      assessmentStatusMenus: [
        // 评定状态枚举值
        {
          value: 0,
          label: '未评定',
        },
        {
          value: 1,
          label: '已评定',
        },
        {
          value: 2,
          label: '已评定并需要重扫',
        },
        {
          value: 3,
          label: '已评定并重扫成功',
        },
      ],
      filterForm: {
        branchName: '',
        pathologyId: '',
        slicePurpose: 1645, //切片用途 1645 字典 代表院内诊断
        scanTimes: '', //扫描开始时间，结束时间
        assessTimes: '', //评定开始时间，结束时间
        page: 0,
        scannerBrandModel: '', // 扫描仪
        sliceQualityStatus: 0, //评定状态  默认未评定
        updateUserId: '',
        size: itemsPerPage.get(),
      },
      assessmentTable: {
        header: [
          {
            label: '分院名称',
            prop: 'branchName',
            width: '107',
          },
          {
            label: '病理号',
            prop: 'pathologyId',
            width: '120',
          },
          {
            label: '切片标签',
            width: '140',
            // isRender: true,
            // render: (h, params) => {
            //   return h('img', {
            //     attrs: {
            //       src: this.imageServiceURL + params.row.labelUrl,
            //     },
            //     style: {
            //       width: '140px',
            //       height: '65px',
            //     },
            //   });
            // },
          },
          {
            label: '缩略图',
            width: '140',
            isRender: true,
            render: (h, params) => {
              return h('img', {
                attrs: {
                  src: this.imageServiceURL + params.row.previewUrl,
                },
                style: {
                  width: '140px',
                  height: '65px',
                },
                on: {
                  click: () => {
                    // 这里通常做路由跳转，弹窗显示，发送请求等
                    this.sliceAssessClick(params.row)
                  }
                }
              });
            },
          },
          {
            label: '切片名称',
            prop: 'originFilename',
            width: '107',
          },
          {
            label: '扫描号',
            prop: 'scannerSerialNumber',
            width: '300',
          },

          {
            label: '切片号',
            prop: 'id',
            width: '107',
          },
          {
            label: '切片类别',
            prop: 'sliceCategoryStr',
            width: '107',
          },
          {
            label: '切片用途',
            prop: 'slicePurposeStr',
            width: '107',
          },
          {
            label: '年龄',
            prop: 'age',
            width: '80',
          },
          {
            label: '性别',
            prop: 'sexStr',
            width: '107',
          },
          {
            label: '评定状态',
            prop: 'sliceQualityStatusStr',
            width: '107',
          },
          {
            label: '上传时间',
            prop: 'createTime',
            width: '160',
          },
          {
            label: '评定时间',
            prop: 'sliceQualityTime',
            width: '160',
          },
          {
            label: '扫描仪',
            prop: 'scannerBrandModel',
            width: '100',
          },
          {
            label: '评定人',
            width: '100',
            prop: 'sliceQualityUserName',
          },
          {
            label: '冰冻',
            prop: 'freezeTypeStr',
            width: '107',
          },
          {
            label: '标本类别',
            prop: 'specimenTypeStr',
            width: '107',
          },
          {
            label: '取材部位',
            prop: 'sampleBody',
            width: '107',
          },
          {
            label: '检查类型',
            prop: 'checkCategoryName',
            width: '107',
          },
          {
            label: '诊断组',
            prop: 'subspecialtyTypeName',
          },
          {
            label: '取材脏器',
            prop: 'sampleOrganName',
            width: '107',
          },
          {
            label: '切片所属医院',
            prop: 'sliceHospitalStr',
            width: '107',
          },

          {
            label: '上传人',
            prop: 'createName',
            width: '107',
          },
        ],
        operation: [
          {
            label: '评定',
            functionKey: 'sliceAssessClick',
          },
        ],
        data: [],
        pageInfo: {
          page: 1,
          size: itemsPerPage.get(),
          total: 0,
        },
        sliceQualityEvaluateProgressInfo: {},
      },
      dictRequestMap: [
        {
          code: 'sliceUses',
          arrayKey: 'sliceUsesList',
        },
        {
          code: 'hospitalList',
          arrayKey: 'hospitalList',
        },
      ],
      sliceUsesList: [],
      showExpansion: false,
      hospitalList: [],
      branchCourtsList: [], //分院列表
    };
  },
  mounted() {
    this.getScannerBrandModelList();
    this.getScanNameList();
    this.getPages();
    this.dictionariesRequest();
  },
  methods: {
    //获取分院列表
    getBranchList(id) {
      this.branchCourtsList = []
      let mData = this.hospitalList.filter((item) => item.id === id)[0]
      if (mData.firstCode) {
        mData.firstCode.split('、').forEach((item) => {
          this.branchCourtsList.push({ name: item })
        })
      }
    },
    // 字典数据请求
    async dictionariesRequest() {
      this.dictRequestMap.forEach((map) => {
        this.$axios({
          method: 'GET',
          url: '/PROXY-Remote/dicts/list',
          params: {
            code: map.code,
            page: 0,
            size: 99,
          },
        }).then(async (res) => {
          if ((await res) && (await res.data.code) === 200) {
            this[map.arrayKey] = _.clone(res.data.data);
          }
        });
      });
    },
    sliceAssessClick(val) {
      const pathologyId=val.pathologyId?val.pathologyId:'null'
      const { state } = this.$store;
      const { href } = this.$router.resolve({
        name: 'Viewer',
        path: '/Viewer',
        query: {
          fileName: val.newFilename,
          originFilename: val.originFilename,
          pathologyId: pathologyId,
          biopsyId: val.id,
          authorization: state.authorization,
          userId: state.user.id,
          searchPathologyId:
            this.filterForm.pathologyId === ''
              ? null
              : this.filterForm.pathologyId,
          slicePurpose: this.filterForm.slicePurpose,
          sliceQualityStatus: this.filterForm.sliceQualityStatus,
        },
      });
      const width = window.screen.availWidth + 10;
      const height = window.screen.availHeight + 10;
      window.open(
        href,
        'doctorWorkstation',
        `location=no,width=${width},height=${height}`
      );
    },
    diagnosisTableButtonClick(functionKey, row) {
      this[functionKey](row);
    },
    diagnosisTablePageJumpTo(val) {
      this.assessmentTable.pageInfo.page = val;
      // 为 diagnosisTable.data 赋值相应页上新数据
      this.getPages();
    },
    diagnosisTableSizeChange(val) {
      this.assessmentTable.pageInfo.size = val;
      // 为 diagnosisTable.data 赋值相应数据量新数据
      this.getPages();
    },
    //获取扫描员
    async getScanNameList() {
      try {
        await this.$axios({
          method: 'get',
          url: '/users/searchScanName ',
        }).then(async (res) => {
          if (res && res.data.code === 200) {
            res.data.data.forEach((item) => {
              this.scanNameList.push({
                label: item.scanName,
                value: item.scanId,
              });
            });
          }
        });
      } catch (e) {
        console.log('请求失败');
      }
    },

    //获取扫描仪列表
    async getScannerBrandModelList() {
      try {
        await this.$axios({
          method: 'get',
          url: '/scannerConfiguration/searchScannerNameAndCode',
        }).then(async (res) => {
          if (res && res.data.code === 200) {
            res.data.data.forEach((item) => {
              this.scannerBrandModelList.push({
                label: item.scannerBrandModel,
                value: item.code,
              });
            });
          }
        });
      } catch (e) {
        console.log('请求失败');
      }
    },
    printList() {
      this.$message.info('此功能还在完善中。。。');
    },
    selectionChange(selection) {
      this.selectedList = selection;
    },
    handleSelectAll(row) {
      this.selectedList = row;
    },
    rescanSuccess() {
      if (this.selectedList.length !== 0) {
        this.$confirm('此操作将确定切片已经重扫完成, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.biopsyIds = this.selectedList.map((item) => {
            return item.id;
          });
          let mData = { biopsyIds: [] };
          mData.biopsyIds = this.biopsyIds;
          this.$axios({
            // 详见 axios 请求配置项
            method: 'POST',
            url: '/biopsy/changeSliceQualityStatus',
            data: mData,
          }).then(async (res) => {
            if ((await res) && (await res.data.code) === 200) {
              await this.getPages();
              this.$message.success({ message: '更新成功' });
            }
          });
        });
      } else {
        this.$message.warning('请选择要更新的切片');
      }
    },
    // 默认主页page页面
    async getPages() {
      const form = {
        startCreateTime:
          !this.filterForm.scanTimes || this.filterForm.scanTimes.length === 0
            ? ''
            : moment(this.filterForm.scanTimes[0])
              .utcOffset('+08:00')
              .format('YYYY-MM-DD HH:mm:ss'),
        endCreateTime:
          !this.filterForm.scanTimes || this.filterForm.scanTimes.length === 0
            ? ''
            : moment(this.filterForm.scanTimes[1])
              .utcOffset('+08:00')
              .format('YYYY-MM-DD HH:mm:ss'), //扫描开始时间，结束时间
        startSliceQualityTime:
          !this.filterForm.assessTimes ||
            this.filterForm.assessTimes.length === 0
            ? ''
            : moment(this.filterForm.assessTimes[0])
              .utcOffset('+08:00')
              .format('YYYY-MM-DD HH:mm:ss'),
        endSliceQualityTime:
          !this.filterForm.assessTimes ||
            this.filterForm.assessTimes.length === 0
            ? ''
            : moment(this.filterForm.assessTimes[1])
              .utcOffset('+08:00')
              .format('YYYY-MM-DD HH:mm:ss'),
        page: this.assessmentTable.pageInfo.page,
        size: this.assessmentTable.pageInfo.size,
        scannerBrandModel: this.filterForm.scannerBrandModel, // 扫描仪
        sliceQualityStatus: this.filterForm.sliceQualityStatus, //评定状态
        updateUserId: this.filterForm.updateUserId,
        slicePurpose: this.filterForm.slicePurpose,
        pathologyId: this.filterForm.pathologyId,
        branchName: this.filterForm.branchName,
        sliceHospital: this.filterForm.sliceHospital,
      };
      await this.$axios({
        url: `/biopsy/findAll/sliceQualityEvaluate`,
        method: 'POST',
        data: form,
      }).then((res) => {
        // 请求失败
        if (res.data.code !== 200) {
          throw new Error(res.data);
        }
        this.assessmentTable.data = res.data.data;
        this.assessmentTable.pageInfo = res.data.pageInfo;
        this.assessmentTable.sliceQualityEvaluateProgressInfo =
          res.data.sliceQualityEvaluateProgressInfo;
      });
    },
    async getAgainScanPage() {
      this.filterForm.sliceQualityStatus = 2;
      await this.getPages();
    },
  },
};
</script>

<style scoped>
.col-button-top {
  margin-top: 6px;
}

.assess-font-color {
  color: #10a1df;
  display: inline-block;
  line-height: 40px;
}

.expansion {
  width: 30px;
  height: 30px;
  display: inline;
  font-size: 28px;
  line-height: 30px;
  margin-top: 25px;
  vertical-align: middle;
  color: #10a1df;
  cursor: pointer;
}
</style>
